<template>
	<div class="bottom">
		<a-row :gutter="15">
			<a-col :span="18">
				<a-card>
					<a-tabs v-model:activeKey="topActiveKey">
						<a-tab-pane key="debtor" tab="客户信息">
							<Debtor :key="timer" :caseId="caseId" @caseInfo="getCaseInfo" @callEvent="debtorCallEvent" />
						</a-tab-pane>
						<a-tab-pane key="allocate" tab="分案记录">
							<Allocate v-if="isLoadChild" :batchNumber="caseInfo.batchNumber" :debtorCardId="caseInfo.debtorCardId" />
						</a-tab-pane>
						<a-tab-pane key="loan" tab="贷款信息">
							<Loan v-if="isLoadChild" :batchNumber="caseInfo.batchNumber" :debtorCardId="caseInfo.debtorCardId" />
						</a-tab-pane>
						<template #tabBarExtraContent>
							<a-row :gutter="24">
								<a-col :span="1.5">
									<a-button type="primary" @click="changeCase('prev')">上一条</a-button>
								</a-col>
								<a-col :span="1.5">
									<a-button type="primary" @click="changeCase('next')">下一条</a-button>
								</a-col>
								<a-col :span="2">
									<!--									<a-tooltip title="调解函生成成功以后，请跳转调解函页面查看">-->
									<!--										<a-button :loading="generateLoading" type="primary"-->
									<!--												  @click="generateWordMediationByCaseId">生成调解函-->
									<!--										</a-button>-->
									<!--									</a-tooltip>-->
									<a-tooltip title="调解函生成成功以后，请跳转调解函页面查看">
										<a-button :loading="generateLoading" type="primary" @click="getWordMediationData"
											>生成调解函
										</a-button>
									</a-tooltip>
								</a-col>
							</a-row>
						</template>
					</a-tabs>
				</a-card>
				<a-card class="mt-1">
					<a-tabs v-model:activeKey="centerActiveKey" class="custom-tabs">
						<a-tab-pane key="liaison" tab="联系人">
							<Liaison
								ref="liaisonRef"
								v-if="isLoadChild"
								:debtorCardId="caseInfo.debtorCardId"
								:projectCode="caseInfo.projectCode"
								:caseId="caseId"
								@callEvent="debtorCallEvent"
								:complaintInfo="complaintInfo"
								@smsEvent="liaisonSmsEvent"
								@liaisonSelfEvent="getLiaisonSelf"
							/>
						</a-tab-pane>
						<template #rightExtra>
							<div class="m-l-24 m-r-24">
								<span>自定义展示信息：{{ htWebCall.customerInfo }}</span>
							</div>
							<a-button type="primary" @click="addContact">新增</a-button>
						</template>
					</a-tabs>
				</a-card>
				<a-card class="mt-1">
					<a-tabs v-model:activeKey="bottomActiveKey">
						<a-tab-pane key="work" tab="作业记录">
							<Work
								v-if="isLoadChild"
								:debtorCardId="caseInfo.debtorCardId"
								:projectCode="caseInfo.projectCode"
								:isRefresh="isRefreshWork"
								@clickWork="clickWork"
							/>
						</a-tab-pane>
						<a-tab-pane key="callRecord" tab="话单记录">
							<CallRecord v-if="isLoadChild" :caseId="caseId" />
						</a-tab-pane>
						<a-tab-pane key="timingTrace" tab="定时跟进">
							<TimingTrace
								ref="timingTraceRef"
								v-if="isLoadChild"
								@editliaisonSelfEvent="getEditLiaisonSelf"
								:liaisonSelf="liaisonSelf"
							/>
						</a-tab-pane>
					</a-tabs>
				</a-card>
			</a-col>
			<a-col :span="6">
				<div class="bottom-right">
					<a-card>
						<AddWork
							v-if="isLoadChild"
							@successful="refreshWork"
							:caseId="caseId"
							:projectCode="caseInfo.projectCode"
							:debtorCardId="caseInfo.debtorCardId"
							:rowData="rowWork"
							:caseInfo="caseInfo"
						/>
					</a-card>
					<a-card class="mt-1">
						<TimingFollow
							:liaisonSelf="liaisonSelf"
							:editLiaisonSelf="editLiaisonSelf"
							@isRefreshTimingTrace="getIsRefreshTimingTrace"
						/>
					</a-card>
				</div>
			</a-col>
		</a-row>
	</div>
	<WordMediationForm ref="generateFormRef" @successful="downloadWordMediation" />
</template>

<script setup name="caseDetail">
	import Debtor from '@/views/tjzy/case/detail/debtor/index.vue'
	import Liaison from '@/views/tjzy/case/detail/liaison/index.vue'
	import Allocate from '@/views/tjzy/case/detail/allocate/index.vue'
	import Loan from '@/views/tjzy/case/detail/loan/index.vue'
	import Work from '@/views/tjzy/case/detail/work/index.vue'
	import CallRecord from '@/views/tjzy/case/detail/call/index.vue'
	import AddWork from '@/views/tjzy/case/detail/work/add/index.vue'
	import TimingFollow from '@/views/tjzy/case/detail/work/timingFollow/index.vue'
	import TimingTrace from '@/views/tjzy/case/detail/timingTrace/index.vue'
	import WordMediationForm from '@/views/tjzy/word/mediation/form.vue'
	import { useRoute } from 'vue-router'
	import caseApi from '@/api/tjzy/case/caseApi'
	import workApi from '@/api/tjzy/work/workApi'
	import htWebCall from '@/plugins/htWebCall'
	import router from '@/router'
	import wordMediationApi from '@/api/tjzy/word/mediation/wordMediationApi'
	import downloadUtil from '@/utils/downloadUtil'
	//=======================================DATA==========================================================
	const Route = useRoute()
	const caseId = ref(Route.query.caseId)
	const timer = ref()
	const timingTraceRef = ref()
	const isLoadChild = ref(false)
	const caseInfo = ref()
	const topActiveKey = ref('debtor')
	const centerActiveKey = ref('liaison')
	const bottomActiveKey = ref('work')
	const generateLoading = ref(false)
	const generateFormRef = ref()
	const liaisonRef = ref()
	const formRef = ref()
	let liaisonSelf = ref({})
	let editLiaisonSelf = ref({})
	//联系人拉黑弹框表单初始数据
	let complaintInfo = ref({
		complainAmount: null,
		complainContent: null,
		complainImportant: null,
		idCard: null,
		mobile: null,
		overdueTime: null,
		projectCode: null,
		userName: null
	})
	//=======================================METHODS==========================================================
	const addContact = () => {
		liaisonRef.value.formRef.onOpen({ debtorCardId: caseInfo.value.debtorCardId })
	}
	const getCaseInfo = (val) => {
		caseInfo.value = val
		isLoadChild.value = true
		complaintInfo.value.complainAmount = val.complainAmount
		complaintInfo.value.idCard = val.debtorCardId
		complaintInfo.value.mobile = val.debtorCasePhone
		complaintInfo.value.projectCode = val.projectCode
		complaintInfo.value.userName = val.debtorName
	}

	const liaisonSmsEvent = () => {
		refreshWork()
	}
	//获取联系人本人信息
	const getLiaisonSelf = (val) => {
		liaisonSelf.value = { ...val, cleanLoanAmount: complaintInfo.value.complainAmount }
	}
	//获取要修改的联系人本人信息
	const getEditLiaisonSelf = (val) => {
		editLiaisonSelf.value = val
	}
	//是否刷新定时跟进列表
	const getIsRefreshTimingTrace = (val) => {
		if (val && bottomActiveKey.value === 'timingTrace') {
			val && timingTraceRef.value.tableRefresh()
		}
	}

	const rowWork = ref()
	const clickWork = (val) => {
		rowWork.value = val
	}
	const isRefreshWork = ref(false)
	const refreshWork = () => {
		isRefreshWork.value = true
		setTimeout(() => {
			isRefreshWork.value = false
		}, 500)
	}
	//=======================================REQUEST==========================================================
	const debtorCallEvent = (workObj) => {
		workApi.addWork(workObj).then((res) => {
			const obj = { caseId: caseId.value, workId: res }
			htWebCall.singlePointCall(workObj.liaisonPhone, obj)
			refreshWork()
		})
	}

	const changeCase = (val) => {
		const obj = {
			caseId: caseId.value,
			cleanLoanAmount: Route.query.cleanLoanAmount,
			type: val,
			sort: Route.query.sort
		}
		caseApi.getNextCaseId(obj).then((res) => {
			if (res !== null) {
				caseId.value = res.id
				router.push({
					path: '/tjzy/case/detail/' + res.id,
					query: {
						caseId: res.id,
						debtorName: res.debtorName,
						sort: Route.query.sort,
						cleanLoanAmount: res.cleanLoanAmount
					}
				})
				isLoadChild.value = false
				timer.value = new Date().getTime()
			}
		})
	}

	const getWordMediationData = () => {
		caseApi.getWordMediationData(caseId.value).then((res) => {
			generateFormRef.value.onOpen(res)
		})
	}

	const downloadWordMediation = (res) => {
		wordMediationApi.generateMediationWord(res).then((res) => {
			downloadUtil.resultDownload(res)
		})
	}
	//=======================================OTHERS==========================================================
	watch(
		() => Route,
		(newVal) => {
			if (Route.name === 'caseDetail') {
				caseId.value = Route.query.caseId
				isLoadChild.value = false
				timer.value = new Date().getTime()
			}
		},
		{ deep: true }
	)
</script>
<style lang="less" scoped>
	.bottom-left {
		width: 80%;
	}

	.custom-tabs :deep(.ant-tabs-nav) {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.custom-tabs :deep(.ant-tabs-extra-content) {
		display: flex;
		flex: 1;
		align-items: center;
		/* 垂直居中 */
		justify-content: space-between;
	}

	.custom-tabs :deep(.ant-tabs-nav-wrap) {
		flex: none !important;
	}
</style>
